<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="user.id" />
    <input type="text" v-model="user.name" />
    <button>提交</button>
  </form>
  <ul>
    <li
      v-for="(item, index) in arr"
      :key="item.id"
      @click="handleRemove(index)"
    >
      {{ item.name }}
    </li>
  </ul>
  <p>总数：{{ total }}</p>
</template>

<script>
// 这种 Options 的写法很方便，很灵活，但是，项目大了之后就有问题了
export default {
  name: 'App',
  data() {
    return {
      // !#1 放数据的地方
      user: {
        id: '',
        name: '',
      },
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    }
  },
  methods: {
    // !#2 放方法的地方
    handleSubmit() {
      // this.arr.push({ ...this.user })
      /* this.arr.push({
        id: this.user.id,
        name: this.user.name,
      }) */
      const user = Object.assign({}, this.user)
      this.arr.push(user)
      this.user.id = ''
      this.user.name = ''
    },
    handleRemove(index) {
      this.arr.splice(index, 1)
    },
  },
  computed: {
    // !#3 和留言相关的计算属性
    total() {
      return this.arr.length
    },
  },
}
</script>
